import { useState } from 'react';
import styles from './CreateIngredientForm.module.css'

const clearData = {
  name: '',
  image: '',
};

const CreateIngredientForm = ({ setIngredients }) => {

  const [data, setData] = useState(clearData);

  const createIngredient = e => {
    e.preventDefault();
    setIngredients(prev => [{ id: prev.length + 1, ...data }, ...prev]);

    setData(clearData);
  }

  return (
    <form className={styles.form}>
      <input
        placeholder='Name'
        onChange={e => setData(prev => ({ ...prev, name: e.target.value }))}
        value={data.name}
      />
      <input
        placeholder='Image'
        onChange={e => setData(prev => ({ ...prev, image: e.target.value }))}
        value={data.image}
      />

      <button className='btn' onClick={e => createIngredient(e)}>Create</button>
    </form>
  );
}

export default CreateIngredientForm;